<template>
  <div class="tinysale-data">
    <ul class="data-wrap">
      <li v-for="(item,index) in list" :key="index" class="grid">
        <div class="grid-left">
          <div class="grid-left-img">
            <img :src="item.img" alt>
          </div>
        </div>
        <div class="grid-body">
          <div class="grid-body-title">
            <span class="tip">{{ item.type }}</span>
            <span>{{ item.title }}</span>
          </div>
          <div class="grid-body-stats">
            <span class="stats-item">
              <i class="el-icon-edit"/>
              &nbsp;点击量&nbsp;{{ item.editNum }}
            </span>
            <span class="stats-item">
              <i class="el-icon-tickets"/>
              &nbsp;订单量&nbsp;{{ item.orderNum }}
            </span>
            <span class="stats-item">
              <i class="el-icon-goods"/>
              &nbsp;总收入&nbsp;{{ item.goods }}
            </span>
          </div>
        </div>
      </li>
    </ul>
    <el-tabs v-model="active">
      <el-tab-pane label="趋势" name="1">
        <div class="search-wrap">
          <el-select v-model="searchSelect" style="width:150px;" @change="handleChange">
            <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="searchDate"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="|"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="selectDate"
          />
        </div>
        <line-chart
          v-if="active === '1'"
          :options="options"
          width="100%"
          height="450px"
          class-name="line-chart"
          style="padding:0 20px;"
        />
      </el-tab-pane>
      <el-tab-pane label="详情" name="2">
        <eltable :table-label="tableLabel" :table-data="tableData"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import LineChart from '@/components/Charts/lineMarker'
  import Eltable from '@/components/Eltable'

  export default {
    components: {
      LineChart,
      Eltable
    },
    data() {
      return {
        searchSelect: '曝光次数',
        searchDate: '',
        active: '1',
        tableLabel: [
          {
            label: '', prop: 'time', width: '10'
          },
          {
            label: '曝光次数', prop: 'export', width: '10'
          },
          {
            label: '分享次数', prop: 'share', width: '10'
          },
          {
            label: '开团数', prop: 'team', width: '10'
          },
          {
            label: '参与人数', prop: 'join', width: '10'
          },
          {
            label: '成功订单', prop: 'success', width: '10'
          },
          {
            label: '订单金额', prop: 'order', width: '10'
          }
        ],
        tableData: [
          {
            time: '2019-04-23',
            export: '0',
            share: '0',
            team: '0',
            join: '0',
            success: '0',
            order: '0.00'
          }
        ],
        list: [
          {
            id: '1',
            img: '//scd4a4b1c7e0b-static.qiqiuyun.net/files/item/2019/04-22/1444066ebb50860524.jpeg',
            type: '多人拼团',
            title: '测试789多人拼团',
            editNum: '0',
            orderNum: '0',
            goods: '0.00'
          }
        ],
        searchOptions: [
          {
            label: '曝光次数',
            value: '曝光次数'
          },
          {
            label: '成单数',
            value: '成单数'
          },
          {
            label: '订单金额',
            value: '订单金额'
          }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        options: {
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: [''],
            right: '1%',
            textStyle: {
              fontSize: 14,
              color: '#F1F1F3'
            }
          },
          grid: {
            top: 50,
            left: 0,
            right: '1%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#8a8a8a'
              }
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
          }],
          yAxis: [{
            type: 'value',
            name: '曝光次数',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                // color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                show: false,
                color: '#8a8a8a'
              }
            }
          }],
          series: [
            {
              name: '统计',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 2
                }
              },
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12
                }
              },
              data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            }
          ]
        }
      }
    },
    created() {
      this.options.yAxis[0].name = this.searchSelect
    },
    methods: {
      handleChange() {
        this.options.yAxis[0].name = this.searchSelect
      },
      selectDate(val) {
        this.options.xAxis[0].data = val
      }
    }
  }
</script>

<style lang="scss">
  .tinysale-data {
    .el-tabs {
      padding: 0 20px;
    }

    .data-wrap {
      width: 100%;
      margin: 0;
      list-style: none;
      padding: 20px 20px 0 20px;

      .grid {
        width: 100%;
        margin: 0 0 20px 0;
        box-shadow: 0 0 5px #737373;

        &-left {
          display: table-cell;
          vertical-align: top;
          padding-right: 20px;

          &-img {
            display: block;
            width: 240px;
            height: 120px;
            border-radius: 3px;
            cursor: pointer;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        &-body {
          display: table-cell;
          vertical-align: top;
          width: 10000px;
          position: relative;

          &-title {
            line-height: 25px;
            margin-bottom: 20px;
            margin-top: 5px;

            .tip {
              background: #409eff;
              color: #fff;
              font-size: 12px;
              padding: 3px;
              border: 1px solid #409eff;
              border-radius: 3px;
              vertical-align: top;
              line-height: 25px;
            }
          }

          &-button {
            vertical-align: top;
            float: right;
            padding-right: 40px;
          }

          &-stats {
            position: absolute;
            bottom: 8px;
            left: 0;

            .stats-item {
              font-size: 12px;
              color: #8492a6;
              width: 150px;
              display: inline-block;
            }
          }
        }
      }
    }

    .search-wrap {
      padding: 20px;
    }
  }
</style>

